<template>
  <div class="app-container home">
    <el-row  type="flex" justify="space-around" class="row-bg">
      <el-card class="box-card cardDiv1">
        <el-col :span="5">
          <div class="box-div card1">
            <div class="webBox">
              <div class="webO">今日交易额:</div>
              <div class="webT">￥{{ priceAll }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card2">
            <div class="webBox">
              <div class="webO">今日订单数量:</div>
              <div class="webT">{{ orderNum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card3">
            <div class="webBox">
              <div class="webO">今日访问人数:</div>
              <div class="webT">{{ logInNum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card4">
            <div class="webBox">
              <div class="webO">今日新增用户:</div>
              <div class="webT">{{ newNum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card5">
            <div class="webBox">
              <div class="webO">累计用户量:</div>
              <div class="webT">{{ personNum }}</div>
            </div>
          </div>
        </el-col>
      </el-card>

    </el-row>
    <!--    <el-divider />-->
    <el-row type="flex" justify="space-around" class="row-bg" style="margin-bottom:10px">
      <el-col :span="10">
        <el-card class="box-card" style="height: 320px;margin-right: 10px">
          <div ref="main1" style="height: 300px;width:700px"></div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card class="box-card" style="height: 320px;margin-right: 10px">
          <div ref="main2" style="height: 270px;width:400px"></div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card class="box-card" style="height: 320px;">
          <div ref="main3" style="height: 270px;width:400px"></div>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-divider />-->
    <el-row type="flex" justify="space-around" class="row-bg" >
      <el-col :span="14" style="margin-right: 10px">
        <el-card class="box-card cardDiv2">
          <div slot="header" class="clearfix">
            <span style="margin-right: 30px">订单信息</span>
          </div>
          <el-table
            :data="tableData2"
            height="300"
            style="width: 100%">
            <el-table-column
              min-width="40px"
              prop="id"
              label="订单编号">
            </el-table-column>
            <el-table-column
              label="下单日期">
              <template slot-scope="scope">
                <span> {{scope.row.createTime==null?'': scope.row.createTime |format('yyyy-MM-dd hh:mm:ss') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userPhone"
              label="乘客手机号">
            </el-table-column>
            <el-table-column
              prop="beginName"
              label="起点名称">
            </el-table-column>
            <el-table-column
              prop="finishName"
              label="终点名称">
            </el-table-column>
            <el-table-column
              prop="status"
              label="订单状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status===0" style="color: #FF9933">等待车辆接单</span>
                <span v-if="scope.row.status===1" style="color: #FF9933">司机已接单</span>
                <span v-if="scope.row.status===2" style="color: #FF5722">司机到达乘客位置</span>
                <span v-if="scope.row.status===3" style="color: #1890ff">乘客上车</span>
                <span v-if="scope.row.status===4" style="color: #FF9933">行程结束</span>
                <span v-if="scope.row.status===5" style="color: #FF9933">待支付</span>
                <span v-if="scope.row.status===6" style="color: #FF5722">支付完成</span>
                <span v-if="scope.row.status===9" style="color: #1890ff">取消订单</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card cardDiv2">
          <div slot="header" class="clearfix">
            <span>优惠券发布历史</span>
            <el-badge :value="99" class="item" style="visibility: hidden">
              <el-button type="text" size="small">待处理订单</el-button>
            </el-badge>
          </div>
          <el-table
            :data="tableData"
            height="300"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="优惠券名称">
            </el-table-column>
            <el-table-column
              prop="start_time"
              label="开始时间">
              <template slot-scope="scope">
                <span> {{scope.row.start_time==null?'': scope.row.start_time |format('yyyy-MM-dd hh:mm:ss') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="end_time"
              label="结束时间">
              <template slot-scope="scope">
                <span> {{scope.row.end_time==null?'': scope.row.end_time |format('yyyy-MM-dd hh:mm:ss') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="all_num"
              label="优惠券数量">
            </el-table-column>
            <el-table-column
              prop="remainder_num"
              label="可兑换优惠券数量">
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="发布时间">
              <template slot-scope="scope">
                <span> {{scope.row.create_time==null?'': scope.row.create_time |format('yyyy-MM-dd hh:mm:ss') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { orderNumInfo , selectOrderLsit , priceOnWeek , carTypeOnOrder , orderTypeList , couponSubmitList } from "@/api/durian/index.js";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.6",
      tableData: [],
      tableData2: [],
      priceAll: undefined,
      orderNum: undefined,
      logInNum: undefined,
      newNum: undefined,
      personNum: undefined,
      priceWeekList: [],
      orderTimeWeekList: [],
      main1: null,
      main2: null,
      main3: null,
      carTypeList: [],
    };
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
  created() {

  },
  mounted() {
    this.couponList()
    this.numInit()
    this.orderList()
    this.weekOnPirce()
    this.orderOnCarType()
    this.orderType()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    orderType(){
      orderTypeList().then(res => {

        var value1 = res.data[0].value;
        var value2 = res.data[1].value;
        var value3 = res.data[2].value;
        var value4 = res.data[3].value;

        this.main3 = echarts.init( this.$refs.main3, "macarons");
        this.main3.setOption( {
          title: {
            text: '订单状态',
            textStyle: {
              fontSize: 15
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,//设置自适应画布大小状态为开，也可通过设置left左移实现相同效果
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine:{
              show:false
            },
            "axisLine":{     //x轴坐标轴
              "show":false
            },
            axisLabel:{
              show: false
            },
            axisTick: {		//x轴刻度线
              show:false
            },
          },
          yAxis: {
            type: 'category', //纵向改成横向柱状图
            data: ['用户发起订单', '司机接单','订单完成','取消订单',  ], //y轴显示文字
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: 20,
              showSymbol: false,
              label:{ //柱状图显示数值
                show:true,
                position: 'insideTop', //内部顶部显示
                textStyle: {
                  color: '#FFF', //字体颜色
                  fontSize: 14 //字体大小
                }
              },
              data: [{
                value:value1,
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //1000纵向柱状图渐变色 0100横向柱状图渐变色
                      offset: 0,
                      color: "rgba(30, 198, 149, 1)" // 0% 处的颜色
                    }, {
                      offset: 0.6,
                      color: "rgba(30, 198, 149, 1)" // 60% 处的颜色
                    }, {
                      offset: 1,
                      color: "rgba(51, 204, 204, 1)" // 100% 处的颜色
                    }], false)
                  }
                },
              },
                {
                  value:value2,
                  itemStyle: {
                    normal: {
                      barBorderRadius: [0, 6, 6, 0],//顺时针左上，右上，右下，左下）
                      color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: "rgba(170, 137, 254, 1)" // 0% 处的颜色
                      }, {
                        offset: 0.6,
                        color: "rgba(170, 137, 254, 1)" // 60% 处的颜色
                      }, {
                        offset: 1,
                        color: "rgba(204, 153, 204, 1)" // 100% 处的颜色
                      }], false)
                    }
                  },

                },
                {
                  value:value3,
                  itemStyle: {
                    normal: {
                      barBorderRadius: [0, 6, 6, 0],
                      color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: "rgba(226, 113, 140, 1)" // 0% 处的颜色
                      }, {
                        offset: 0.6,
                        color: "rgba(244, 174, 149, 1)" // 60% 处的颜色
                      }, {
                        offset: 1,
                        color: "rgba(244, 174, 149, 1)" // 100% 处的颜色
                      }], false)
                    }
                  },

                },
                {
                  value:value4,
                  itemStyle: {
                    normal: {
                      barBorderRadius: [0, 6, 6, 0],
                      color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: "rgba(255, 153, 51, 1)" // 0% 处的颜色
                      }, {
                        offset: 0.6,
                        color: "rgba(255, 153, 51, 1)" // 60% 处的颜色
                      }, {
                        offset: 1,
                        color: "rgba(239, 203, 45, 1)" // 100% 处的颜色
                      }], false)
                    }
                  },
                },

              ]
            },
          ]
        })
      })
    },
    orderOnCarType(){
      carTypeOnOrder().then(res => {

        for (let index in res.data) {
          this.carTypeList.push(res.data[index].name);
        }

        this.main2 = echarts.init( this.$refs.main2, "macarons");

        this.main2.setOption({
          color: ['#49bafc', '#e9898f', '#f7b230', '#bd92e1', '#26c8aa'],
          title: {
            text: '车型接单占比',
            left: 'left',
            textStyle: {
              fontSize: 15
            },

          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 1,
            left: 'center',
            data: this.carTypeList
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '45%'],
              selectedMode: 'single',
              data: res.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })

        window.addEventListener("resize", () => {
          this.main2.resize();
        });
      })
    },
    weekOnPirce(){
      priceOnWeek().then(res => {
        for (let index in res.data) {
          this.priceWeekList.push(res.data[index].price);
          this.orderTimeWeekList.push(res.data[index].ordertime);
        }

        var list1 = this.orderTimeWeekList;
        var list2 = this.priceWeekList;

        this.main1 = echarts.init( this.$refs.main1, "macarons");
        this.main1.setOption({
          title: [{
            text: '一周交易额',
            textStyle: {
              fontSize: 15
            },

          },
            {
              text: '单位:元',
              left:'80%',
              textStyle:{
                fontSize:13,
                fontWeight:100
              }
            }],
          xAxis: {
            type: 'category',
            data: list1
          },
          yAxis: {
            type: 'value',
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed'
              }
            }
          },
          series: [
            {
              data: list2,
              type: 'line',
              itemStyle: {
                normal: {
                  color: "#2ec7c9",
                  lineStyle: {
                    color: "rgb(30 198 149)"
                  }
                }
              },
            }
          ]
        })
        window.addEventListener("resize", () => {
          this.main1.resize();
        });

      })
    },
    orderList(){
      selectOrderLsit().then(res => {
        this.tableData2 = res.rows;
      })
    },
    numInit(){
      orderNumInfo().then(res => {
        this.priceAll = res.data.priceAll
        this.orderNum = res.data.orderNum
        this.logInNum = res.data.logInNum
        this.newNum = res.data.newNum
        this.personNum = res.data.personNum
      })
    },
    couponList(){
      couponSubmitList().then(res => {
        this.tableData = res.rows
      })
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 15px 20px 20px 20px;
  display: flex;
  justify-content: center;
}
.box-div{
  height: 120px;
  padding: 35px;
  margin: 20px;
}
.cardDiv1{
  width: 100%;
  margin-bottom: 10px;
}
.cardDiv2{
  width: 100%;
  margin-bottom: 20px;
}
.app-container {
  padding: 20px;
  background: #eeeeee50;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .webBox{
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .webO{
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }
  .webT{
    display: -webkit-box;
    -webkit-box-pack: end;
    -webkit-box-align: center;
    font-size: 20px;
    font-weight: 700;
    padding-right: 50px;
    padding-top: 10px;
    color: #fff;
  }
  .card1{
    background: linear-gradient(180deg, rgba(30, 198, 149, 1) 0%, rgba(30, 198, 149, 1) 0%, rgba(51, 204, 204, 1) 100%, rgba(51, 204, 204, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card2{
    background: linear-gradient(90deg, rgba(244, 174, 149, 1) 0%, rgba(244, 174, 149, 1) 0%, rgba(226, 113, 140, 1) 100%, rgba(226, 113, 140, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card3{
    background: linear-gradient(180deg, rgba(255, 153, 51, 1) 0%, rgba(255, 153, 51, 1) 0%, rgba(239, 203, 45, 1) 100%, rgba(239, 203, 45, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card4{
    background: linear-gradient(180deg, rgba(45, 169, 250, 1) 0%, rgba(45, 169, 250, 1) 0%, rgba(102, 204, 255, 1) 100%, rgba(102, 204, 255, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card5{
    background: linear-gradient(180deg, rgba(170, 137, 254, 1) 0%, rgba(170, 137, 254, 1) 0%, rgba(204, 153, 204, 1) 100%, rgba(204, 153, 204, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
}
</style>

